<template>
  <div class="comment_manage_page">
    <div class="content">
      <div class="toolbar">
        <el-form :inline="true" :model="formParams">
          <el-form-item label="分类">
             <el-select
             v-model="formParams.type"
             placeholder="请选择"
             @remove-tag="removeTag"
             @change="tagChange"
             >
             <el-option
             v-for="item in typeList"
             :label="item.dictName"
             :value="item.dictDescribe"
             />
          </el-select>
        </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
            <el-button plain @click="clear">重置</el-button>
            <el-button type="success" plain @click="add">新建</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="content_table">
        <div class="table">
          <el-table :data="tableData" border style="width: 100%" :header-cell-style="{ background: '#EEF3FF', color: '#333333' }">
            <el-table-column prop="type" label="分类" show-overflow-tooltip >
              <template slot-scope="scope">
                <span v-for="item in typeList">
                  <span v-if="scope.row.type==item.dictDescribe">{{item.dictName}}</span>
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="title" label="名称" />
            <el-table-column label="图片" width="150" align="center">
              <template slot-scope="scope">
                <img height="80" width="80" :src="scope.row.img " alt srcset>
              </template>
            </el-table-column>
            <el-table-column prop="link" label="超链接" />
            <el-table-column prop="sort" label="倒序排序" />
           <el-table-column prop="isShow" label="是否展示" show-overflow-tooltip>
             <template slot-scope="scope">
               <span v-if="scope.row.isShow==0">否</span>
               <span v-if="scope.row.isShow==1">是</span>
             </template>
           </el-table-column>
            <el-table-column prop="createAt" label="创建时间" />
            <el-table-column prop="updateAt" label="修改时间" />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <div >
                  <el-button type="text" @click="update(scope.row)">修改</el-button>
                  <el-button type="text" @click="deletes(scope.row.id)">删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="fenye">
            <el-pagination
              :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- ******************************************************弹框开始***************************************************************** -->
    <el-dialog
         :title="bannerState ? '新增轮播图' : '修改轮播图'"
         :visible.sync="addFormDialog"
         width="30%"
         center
         :close-on-click-modal="false"
    >
    <!-- <div class="addCom common"> -->
            <el-form ref="bannerForm" :model="addForm" label-width="80px">
             <el-form-item label="分类">
               <el-select
                 v-model="addForm.type"
                 placeholder="请选择"
                 @remove-tag="removeTag"
                 @change="tagChange"
               >
               <el-option
                 v-for="item in typeList"
                 :label="item.dictName"
                 :value="item.dictDescribe"
               />
               </el-select>
               </el-form-item>
              <el-form-item label="标题" prop="title">
                <el-input v-model="addForm.title" placeholder="请输入标题" />
              </el-form-item>
              <el-form-item label="图片">
                <div class="upload-wrap">
                  <el-upload
                     class="avatar-uploader"
                      :action="action"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload"
                      >
                  <img v-if="addForm.img" :src="addForm.img" class="avatar">
                     <i v-else class="el-icon-plus avatar-uploader-icon" />
                      </el-upload>
                </div>
                <p>
                   <span style="color: blue">参考尺寸:</span>
                   <span style="color: red">750*280</span>
                </p>
              </el-form-item>

              <el-form-item label="超链接">
                <el-input v-model="addForm.link" placeholder="请输入超链接"  />
              </el-form-item>
              <el-form-item label="倒序序号">
                <el-input v-model="addForm.sort" placeholder="请输入序号" />
              </el-form-item>
              <el-form-item label="是否展示">
                <el-select v-model="addForm.isShow" placeholder="请选择">
                  <el-option label="展示" :value="1" />
                  <el-option label="隐藏" :value="0" />
                </el-select>
              </el-form-item>
            </el-form>
          <!-- </div> -->
          <span slot="footer" class="dialog-footer">
            <el-button @click="addFormDialog = false">取 消</el-button>
            <el-button type="primary" @click="addForm_enter('bannerForm')">确 定</el-button>
          </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  bannerListGetAll,
  bannerSave,
  bannerGetById,
  bannerDelete
} from '@/api/banner'

import { uploadUrl } from '@/utils/request'
export default {
  data() {
    return {
      formParams: {
        type:'',
        id:'',
        page: '1', // 当前页
        pageSize: '10' // 每页记录数
      },
      action: uploadUrl,
      date: [],
      tableData: [],
      tabList: [
        { name: '轮播图', id: 0 }
      ],
      total: 1,
      currentPage: 1,
      bannerState:1,
      typeList: [],
      addForm: {
              type: '', // 分类
              title: '', // 标题
              img:'',//图片
              link:'',//链接
              sort:9,//倒序排序
              isShow: 1 // 是否展示 1-是 0-否
            },

      addFormDialog: false
    }
  },
  created() {
    this.getList(this.formParams)
  },
  methods: {
    handleSizeChange(val) {
      this.formParams.pageSize = val
      this.getList(this.formParams)
    },
    handleCurrentChange(val) {
      this.formParams.page = val
      this.getList(this.formParams)
    },
    selectItem(tab, event) {
      this.formParams.ifSensitive = tab.name
      console.log(tab.name)
      this.getList(this.formParams)
    },
     handleAvatarSuccess(res, file) {
          this.addForm.img = res.data.url
        },
        beforeAvatarUpload(file) {
          const isLt10M = file.size / 1024 / 1024 < 2
          if (!isLt10M) {
            this.$message.error('上传头像图片大小不能超过 2MB!')
          }
          return isLt10M
        },
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url
          console.log(file)
          this.dialogVisible = true
        },

    // 查询
    search() {
      this.total = 1
      this.formParams.page = 1
      this.getList(this.formParams)
    },
    // 重置
    clear() {
      this.formParams = {
        type:'',//分类
        page: '1', // 当前页
        pageSize: '10' // 每页记录数
      }
      this.getList(this.formParams)
    },
    // 新增轮播图
    add() {
      this.bannerState = 1
      this.addFormDialog = true
      this.addForm = {
        type: '', // 分类
        title: '', // 标题
        img:'',
        sort: '',//倒序排序
        link:'',//超链接
        isShow: 1 // 是否展示 1-是 0-否
      }
    },
    removeTag(index) {
      console.log(index)
    },
    tagChange(index) {
      this.$forceUpdate()
      console.log(index)
    },
    addForm_enter(bannerForm) {
      this.$refs[bannerForm].validate(valid => {
        if (valid) {
          if (this.bannerState) {
            bannerSave(this.addForm).then(res => {
              console.log(res)
              if (res.code === '') {
                this.$message({
                  message: '新增成功',
                  type: 'success'
                }),
                 this.addFormDialog = false
                 this.getList(this.formParams)
              }


            })
          } else {
            bannerSave(this.addForm).then(res => {
              console.log(res)
              if (res.code === '') {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                }),
                this.addFormDialog = false
                this.getList(this.formParams)
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 删除
    async del() {
      const res = await bannerDelete({
        id: this.id
      })
      if (res.code === '') {
        this.$message.success('删除成功')
        this.dialogVisible = false
        this.getList(this.formParams)
      }
    },
    async deletes(id) {
      const res = await bannerDelete({
        id: id
      })
      if (res.code === '') {
        this.$message.success('删除成功')
        this.getList(this.formParams)
      }
    },
    // 修改
    update(row) {
          this.bannerState = 0
          this.addFormDialog = true
          console.log(row)
          bannerGetById({ id: row.id }).then(res => {
            this.addForm = res.data
            this.addForm.type = res.data.type
            console.log(this.addForm)
            // this.addForm.roleIds = [1];
          })
        },
    handleClose() {
      this.dialogVisible = false
    },
    // 初始化查询所有数据
    async getList(formParams) {
      const res = await bannerListGetAll(formParams)
      const res2= await bannerGetById({ search: '', page: 1, pageSize: 10 })
      this.tableData = res.data.list
      this.total = res.data.total
      this.typeList = res2.data.typeList
    }
  }
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style lang='scss' scoped>
@import url("../../../styles/elDialog.scss");
.comment_manage_page {
  padding: 20px;
}
.addCom {
  margin: 10px;
  justify-content: space-around;
  align-items: unset;
  .leftCom {
    width: 68%;
    background: #ffffff;
  }
  .rightCom {
    width: 28%;
    background: #ffffff;
  }
}
.common {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pinStyle {
  .comment {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    .com_left {
      font-size: 20px;
      color: #333333;
      margin-right: 20px;
    }
    .com_right {
      font-size: 18px;
      color: #333333;
    }
  }
  .line {
    width: 890px;
    height: 1px;
    background: #e0e5eb;
    margin: 0 auto;
    margin-bottom: 33px;
  }
}
</style>
